import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { Column } from '@ant-design/plots'
import { complexColumnTemplate, singularColumnTemplate } from '../Template'
import { useRef } from 'react'
import { useRequest, useSize } from 'ahooks'
import { project } from '../../../../Common/Data'
import { Http } from '../../../../Common/Api'
import { insertCharacter } from '../../../../Common/Configure/Common'
import { useEffect } from 'react'
import { useState } from 'react'
const { imageUrl } = project[window.location.hostname]

export const NinA01 = () => {
    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            const { list, list1, list3, list7, list6 } = res
            setDataOne(list[0])

            let DataTwo = []
            list1.forEach(item => {
                let label =
                    item.yS_YunShuFang.length > 4 ? insertCharacter(item.yS_YunShuFang, '\n', 4) : item.yS_YunShuFang
                DataTwo = [
                    ...DataTwo,
                    { type: '已对账', label, value: item.settleMoney },
                    { type: '未对账', label, value: item.outstandingMoney },
                ]
            })
            setDataTwo(DataTwo)

            let DataThr = []
            list7.forEach(item => {
                let label =
                    item.yS_CaiLiaoName.length > 4 ? insertCharacter(item.yS_CaiLiaoName, '\n', 4) : item.yS_CaiLiaoName
                DataThr = [
                    ...DataThr,
                    { type: '已对账', label, value: item.settleMoney },
                    { type: '未对账', label, value: item.outstandingMoney },
                ]
            })
            setDataThr(DataThr)

            setDataFou(
                list3.map(item => ({
                    label: `${item.yS_CaiLiaoName}\n${item.cL_EUnit}`,
                    value: item.yS_ShouLiaoShuLiang,
                })),
            )

            let DataFiv = []
            list6.forEach(item => {
                let label =
                    item.yS_YunShuFang.length > 4 ? insertCharacter(item.yS_YunShuFang, '\n', 4) : item.yS_YunShuFang
                DataFiv = [
                    ...DataFiv,
                    { type: '已对账', label, value: item.settleMoney },
                    { type: '未对账', label, value: item.outstandingMoney },
                ]
            })

            setDataFiv(DataFiv)
        },
    })

    useEffect(() => {
        runAsync({ url: 'getJTGJCaiLiaoList' })
    }, [runAsync])

    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)
    const ChartFiv = useRef()
    const SizeFiv = useSize(ChartFiv)

    const ListOne = [
        { uuid: 1, label: '总金额', value: 'totalMoney', unit: '万元', img: 'Ele001.png' },
        { uuid: 2, label: '已结金额', value: 'settleMoney', unit: '万元', img: 'Ele002.png' },
        { uuid: 3, label: '未结金额', value: 'outstandingMoney', unit: '万元', img: 'Ele003.png' },
        { uuid: 4, label: '承运单位', value: 'carrierCount', unit: '台', img: 'Ele004.png' },
        { uuid: 5, label: '累计进场', value: 'accumulativeCar', unit: '台', img: 'Ele005.png' },
        { uuid: 6, label: '当前在场', value: 'nowCar', unit: '台', img: 'Ele006.png' },
    ]

    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState([])
    const [DataThr, setDataThr] = useState([])
    const [DataFou, setDataFou] = useState([])
    const [DataFiv, setDataFiv] = useState([])

    return (
        <>
            <CommonSmallTitle title="运输情况" flex={50} style={{ marginRight: 16 }}>
                <div className="one">
                    {ListOne.map(({ uuid, label, value, unit, img }) => (
                        <div key={uuid}>
                            <img src={imageUrl + img} alt="" />
                            <div>
                                <div>{label}</div>
                                <div>
                                    {DataOne ? DataOne[value] : 0} <span>{unit}</span>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </CommonSmallTitle>
            <div className="left">
                <CommonSmallTitle title="承运单位运费汇总" style={{ marginBottom: 16 }}>
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ['rgba(0, 201, 209, 1)', 'rgba(58, 129, 225, 1)'],
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="材料费汇总">
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: ['rgba(0, 201, 209, 1)', 'rgba(58, 129, 225, 1)'],
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <div className="right">
                <CommonSmallTitle title="材料运输情况" style={{ marginBottom: 16 }}>
                    <div className="fou" ref={ChartFou}>
                        {SizeFou && (
                            <Column
                                {...singularColumnTemplate({
                                    size: SizeFou,
                                    data: DataFou,
                                    color: 'rgba(0, 201, 209, 1)',
                                    isGroup: true,
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="供应商材料费汇总">
                    <div className="fiv" ref={ChartFiv}>
                        {SizeFiv && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeFiv,
                                    data: DataFiv,
                                    color: ['rgba(0, 201, 209, 1)', 'rgba(58, 129, 225, 1)'],
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
        </>
    )
}
